<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body,
        p,
        ul,
        h2 {
            margin: 0;
            padding: 0;
        }

        img {
            border: 0;
        }

        h2 {
            font-size: 14px;
            font-weight: normal;
            text-align: center;
        }

        ul {
            overflow: hidden;
            position: relative;
        }

        li {
            list-style: none;
            float: left;
        }

        #main {
            background: tan;
            border: 1px solid #73BDEF;
            margin: 50px auto;
            width: 800px;
            height: 280px;
            padding: 10px;
            position: relative;
            -overflow: hidden;
        }

        .left>img {
            width: 250px;
            height: 220px;
            margin: 10px;
            margin-bottom: 2px;
        }

        .left>p {
            margin-left: 10px;
            width: 250px;
            text-align: center;
            background: #d6eff7;
            line-height: 20px;
            font-size: 12px;
        }

        #tabs {
            margin-left: 300px;
        }

        #tabs li {
            background: #EFEFF7;
            padding: 6px 30px;
            margin-right: 15px;
            font-size: 12px;
            color: #087B00;
            border: 1px solid #A5DEF7;
        }

        #product,
        #geek {
            position: absolute;
            width: 820px;
            height: 265px;
            left: 0;
            top: 35px;
            background: #fff;
            display: none;
        }

        #product ul,
        #geek ul {
            width: 1800px;
        }

        #product ul img,
        #geek ul img {
            width: 160px;
            height: 150px;
            margin: 10px;
            margin-top: 0;
            margin-bottom: 5px;
        }

        #product ul p,
        #geek ul p {
            font-size: 12px;
            color: gray;
            width: 160px;
            margin: 5px 10px;
        }

        #product .nav,
        #geek .nav {
            position: absolute;
            width: 100px;
            top: 235px;
            width: 540px;
            left: 260px;
        }

        .nav li {
            display: block;
            margin-right: 60px;
            font-weight: bold;
            position: relative;
            left: 200px;
            width: 20px;
            height: 20px;
            border: 1px solid #73BDEF;
            text-align: center;
            padding: 0 10px;
            cursor: pointer;
          z-index: 2;
        }

        #product .round,
        #geek .round {
            position: absolute;
            top: 240px;
            left: 510px;
            width: 55px;
            /* background: red; */
        }

        #geek .round {
            left: 525px;
        }

        #product .round li,
        #geek .round li {
            display: block;
            width: 10px;
            height: 10px;
            background-color: #fff;
            border: 1px solid #73BDEF;
            border-radius: 10px;
            margin: 0 2px;
        }

        #product .showbox,
        #geek .showbox {
            position: absolute;
            top: 10px;
            left: 270px;
            width: 500px;
            width: 540px;
            height: 220px;
            overflow: hidden;
        }

        .showbox ul {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <script src="./tools.js"></script>
    <script>
        window.onload = function(){
            var product = document.getElementById("product"),
            geek = document.getElementById("geek"),
            tabs = document.getElementById("tabs"),
            tabLis = tabs.getElementsByTagName("li"),
           round1 = product.getElementsByClassName("round")[0].getElementsByTagName("li"),
           round2 = geek.getElementsByClassName("round")[0].getElementsByTagName("li"),
            arrow1 = product.getElementsByClassName("nav")[0].getElementsByTagName("li"),
            arrow2 = geek.getElementsByClassName("nav")[0].getElementsByTagName("li"),
            showbox = document.getElementsByClassName("showbox"),
            content1 = showbox[0].getElementsByTagName("ul")[0],
            content2 = showbox[1].getElementsByTagName("ul")[0],
            num = 0;
            
        //初始化
        tabLis[0].style.background = '#fff';
        product.style.display = 'block';
        round1[0].style.background = 'red';
        round2[0].style.background = 'red';
        //tab页切换
        tabLis[0].onmouseover = function(){
            for(var i = 0; i < tabs.length;i++){
                tabLis[i].style.background = 'blue';
            }
            this.style.background = '#fff';
            product.style.display = 'block';
            geek.style.display = 'none';
        }
        tabLis[1].onmouseover = function(){
            for(var i = 0; i < tabs.length; i++){
                tabLis[i].style.background = 'blue';
            }
            this.style.background = '#fff';
            product.style.display = 'none';
            geek.style.display = 'block';
        }
        //箭头点击事件
        // console.log(round1.length) 3
        arrow1[1].onclick = function(){
            num++;
            if(num == round1.length){
                num = round.length -1;
            }
            doMove(content1,'left',30,-540*num,function(){
                for(var i = 0; i < round1.length; i++){
                    round1[i].style.background = '#fff';
                }
                round1[num].style.background = 'blue';
            })
        }
        arrow1[0].onclick = function(){
            num--;
            if(num < 0){
                num = 0;
            }
            doMove(content1,'left',30,-540*num,function(){
                for(var i = 0; i < round1.length; i++){
                    round1[i].style.background = '#fff';
                }
                round1[num].style.background = 'blue';
            })
        }
        }
    </script>
</head>

<body>
    <div id="main">
        <ul id="tabs">
            <li>新品</li>
            <li>极客</li>
        </ul>
        <div id="product">
            <div class="left">
                <img src="./img/pic1.jpg" />
                <p>小鸟学飞</p>
            </div>
            <div class="showbox">
                <ul>
                    <li>
                        <img src="./img/1.png" alt="">
                        <h2>黑莓Bold Touch真机现身</h2>
                        <p>今天介绍的一款相机产品一向是因多种配色</p>
                    </li>
                    <li>
                        <img src="./img/2.png" alt="">
                        <h2>黑莓Bold Touch真机现身</h2>
                        <p>今天介绍的一款相机产品一向是因多种配色</p>
                    </li>
                    <li>
                        <img src="./img/3.png" alt="">
                        <h2>黑莓Bold Touch真机现身</h2>
                        <p>今天介绍的一款相机产品一向是因多种配色</p>
                    </li>
                    <li>
                        <img src="./img/4.png" alt="">
                        <h2>黑莓Bold Touch真机现身</h2>
                        <p>今天介绍的一款相机产品一向是因多种配色</p>
                    </li>
                    <li>
                        <img src="./img/5.png" alt="">
                        <h2>黑莓Bold Touch真机现身</h2>
                        <p></p>
                    </li>
                    <li>
                        <img src="./img/6.png" alt="">
                        <h2>黑莓Bold Touch真机现身</h2>
                        <p>今天介绍的一款相机产品一向是因多种配色</p>
                    </li>
                    <li>
                        <img src="./img/7.png" alt="">
                        <h2>黑莓Bold Touch真机现身</h2>
                        <p>今天介绍的一款相机产品一向是因多种配色</p>
                    </li>
                    <li>
                        <img src="./img/8.png" alt="">
                        <h2>黑莓Bold Touch真机现身</h2>
                        <p></p>
                    </li>
                    <li>
                        <img src="./img/9.png" alt="">
                        <h2>黑莓Bold Touch真机现身</h2>
                        <p>今天介绍的一款相机产品一向是因多种配色</p>
                    </li>
                </ul>
            </div>
            <ul class="nav">
                <li class="lf">&lt;</li>
                <li class="rt">&gt;</li>
            </ul>
            <ul class="round">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div id="geek">
            <div class="left">
                <img src="./img/pic2.jpg" />
                <p>三星手机</p>
            </div>
            <div class="showbox">
                <ul>
                    <li>
                        <img src="./img/ad1.png" alt="">
                        <h2>黑莓Bold Touch真机现身</h2>
                        <p>今天介绍的一款相机产品一向是因多种配色</p>
                    </li>
                    <li>
                        <img src="./img/ad2.png" alt="">
                        <h2>黑莓Bold Touch真机现身</h2>
                        <p>今天介绍的一款相机产品一向是因多种配色</p>
                    </li>
                    <li>
                        <img src="./img/ad3.png" alt="">
                        <h2>黑莓Bold Touch真机现身</h2>
                        <p>今天介绍的一款相机产品一向是因多种配色</p>
                    </li>
                </ul>
            </div>
            <ul class="nav">
                <li class="lf">&lt;</li>
                <li class="rt">&gt;</li>
            </ul>
            <ul class="round">
                <li></li>
            </ul>
        </div>
    </div>
</body>

</html>